<template>
  <div class="box">
  <div :style="{ width: labelLineObj.width, height: labelLineObj.height }">
    <Echart
      :options="options"
      id="labelLineAdjust"
      key="labelLineAdjust"
      ref="labelLineAdjust"
      :height="labelLineObj.height"
      @setTotal="setTotal"
      width="100%"
    ></Echart>
  </div>
  <div class="tot" :style="totStyle">
      <div :style="textLineOneStyle" class="line-one">{{tot}}</div>
      <div :style="textLineTwoStyle"  class="line-two">
       {{unit}}
      </div>
    </div>
  </div>
</template>
      
  <script>
import Echart from "@/common/echart";
export default {
  props: {
    labelLineObj: {
      width: {
        type: String,
        default: "100%",
      },
      height: {
        type: String,
        default: "90px",
      },
    },
    textLineOneStyle:{
      type:String,
      default:'color: #42c7de;font-size: 20px;font-weight: 600'
    },
    textLineTwoStyle:{
      type:String,
      default:'color: #fff;font-size: 14px;font-weight: 600;'
    },
    totStyle:{
      type:String,
      default:'width: 90px;top: 44px;left: 26px;'
    }
  },
  data() {
    return {
      options: {},
      tot:0,
      unit:'',
    };
  },
  components: {
    Echart,
    // mapDialog
  },
  watch:{
    labelLineObj(oldVal,newVal){
      
      this.initData();
    }
  },
  created() {},
  methods: {
    initData(){
    let that = this;
    let valueData = that.labelLineObj.valueData;
    // console.log(that.labelLineObj);
    that.tot=(valueData.reduce((pre, cur) => pre + cur.value, 0)).toFixed(2);
    that.unit=that.labelLineObj.subtext
    this.options = {
      legend: {
        orient: "vertical",
        top: "center",
        right: "0%",
        left: this.labelLineObj.legendLeft || "55%",
        itemWidth: 35,
        itemHeight: 15,
        data: valueData
          ? valueData.map((it) => {
              let name=it.name
              return name;
            })
          : [],
        textStyle: {
          fontSize: 12,
          color: "#fff",
          rich: {
            one: {
              color: "#34EFFE",
              fontWeight: 600,
            },
          },
        },
        formatter: (name) => {
            let num = 0;
            for (var i = 0; i < valueData.length; i++) {
              if (name == valueData[i].name) {
                num = valueData[i].value;
              }
            }
            return  `${name} {one|${num}}`;
        },
      },
     /*  title: [
        {
          show: this.labelLineObj.centerText,
          text: this.labelLineObj.titleText || 0,
          subtext: this.labelLineObj.subtext,
          textStyle: {
            fontSize: 14,
            color: "rgba(52, 239, 254, 1)",
            fontWeight: "normal",
          },
          subtextStyle: {
            fontSize: 14,
            color: "#fff",
            // fontWeight: "bold",
          },
          textAlign: "center",
          x: "28%",
          y: "34%",
        },
      ], */
      //   backgroundColor: "#031845",
      tooltip: {
        trigger: "item",
        // appendToBody: true,
        formatter: function (parms) {
          let str = `${parms.data.name}案件${parms.data.value}起</br>同比${parms.data.proportion} ${parms.percent}%`;
          if (that.labelLineObj.type == 2) {
            // str = `${parms.data.name}案值${parms.data.value}万元(${parms.percent}%)`;
            str = `${parms.data.name}案值 ${parms.percent}%`;
          } else if (that.labelLineObj.type == 3) {
            // str = `${parms.data.name}数量${parms.data.value}万支</br>同比${parms.data.proportion}`;
            // str = `${parms.data.name}数量${parms.data.value}万支(${parms.percent}%)`;
            str = `${parms.data.name}数量 ${parms.percent}%`;
          } else if (that.labelLineObj.type == 4) {
            // str = `${parms.data.name}数量${parms.data.value}个</br>同比${parms.data.proportion}`;
            str = `${parms.data.name}数量 ${parms.percent}%`;

          }
          return str;
        },
      },
      series: [
        {
          type: "pie",
          radius: this.labelLineObj.radius || ["55%", "80%"],
          center: this.labelLineObj.seriesCenter || ["30%", "50%"],
          // color: ["#FDDD61", "#57D8F9", "#FF6F77", "#FF9352"],
          // color: ["#42c7de", "#d3b931", "#cb455e", "#04c375"],
          color: ["#cb455e", "#0158e9", "#d3b931", "#04c375", "#C36004",'#4951FF','#42C7DE','#168D6F','#15ABFF'],
          data: valueData || [],
          labelLine: {
            normal: {
              show: false,
              length: 3,
              length2: 3,
            },
          },
          label: {
            normal: {
              show: false,
            },
          },
        },
      ],
    };
    },
    setTotal(selectArr){
      // console.log(selectArr);
      let result = 0;
      selectArr.forEach((k) => {
        this.labelLineObj.valueData.forEach((cur) => {
          if (k === cur.name) {
            result += cur.value;
          }
        });
      });
      this.tot=result.toFixed(2)
    }
  },
  mounted() {
    this.initData();
  },
};
</script>
      
  <style lang="scss" scoped>

.box {
  position: relative;
  width: 100%;
  height: 100%;
  .tot {
    position: absolute;
    width: 90px;
    top: 44px;
    left: 80px !important;
    text-align: center;
  }
}
</style>
      